<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
<!--  <h2 :style="{key(css属性名):value(css属性值)}">{{message}}</h2>-->
    <!--'50px'必须加单引号，否则会当成一个变量来解析-->
<!--  <h2 :style="{fontSize:'50px'}">{{message}}</h2>-->
  <h2 :style="{fontSize:finalSize +'px',color:finalColor}">{{message}}</h2>
<!--  <h2 :style="{fontSize:finalSize}">{{message}}</h2>
            finalSize:'100px'-->

<!--另一种写法，将括号中的内容抽出来作为一个方法-->
  <h2 :style="getStyle()">{{message}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
  const vm=new Vue({
    el:'#app',
    data:{
      message:'你好啊！！',
      finalSize:100,
      finalColor:'red'
    },
    methods:{
      getStyle:function () {
        return{fontSize:this.finalSize +'px',color:this.finalColor}
      }
    }
  })
</script>

</body>
</html>